<template>
  <div class="error-images">
    <img src="@/assets/error/403.4f9dbde6.png" class="image-parent" />

    <div class="message">
      <div class="line1">抱歉!</div>
      <div class="line2">您没有操作角色</div>
      <div class="line3">当前账号没有操作角色，请联系管理员</div>
      <button class="custom-button">返 回</button>
    </div>
  </div>
  <img src="@/assets/error/base.png" class="image-child" />
</template>
<script setup>
import { ref, onMounted } from 'vue'

const showText = ref(false)

onMounted(() => {
  // 图片动画：由下向上出现
  setTimeout(() => {
    showText.value = true
  }, 1000) // 延迟1秒后显示文字
})
</script>

<style scoped>
.error-images {
  position: relative; /* 让子元素相对于该容器定位 */
  display: flex;
  justify-content: center; /* 图片水平居中 */
  align-items: center; /* 图片垂直居中 */
  height: 70vh; /* 设置容器高度为视口高度 */
}

.image-parent {
  width: 250px; /* 设置图片宽度 */

  position: absolute; /* 绝对定位 */
  top: 40%; /* 图片顶部与容器中心对齐 */
  left: 40%; /* 图片左侧与容器左侧保持一定距离 */
  transform: translate(-50%, -50%); /* 居中 */
  opacity: 0; /* 默认隐藏图片 */
  animation: fadeIn 2s ease forwards; /* 图片慢慢出现动画 */
}

.image-child {
  width: 70px; /* 调整第二张图片的大小 */
  height: 70px; /* 调整第二张图片的大小 */
  position: absolute;
  top: 20%; /* 第二张图片初始位置：相对于第一张图片的右上角 */
  left: 60%; /* 第二张图片初始位置：相对于第一张图片的右上角 */
  opacity: 0;
  animation: moveAndFade 3s ease forwards;
}
.message {
  position: absolute; /* 绝对定位 */
  top: 35%; /* 上边距50%，使文字垂直居中 */
  left: calc(50% + 140px); /* 左边距50%，使文字水平居中 */
  transform: translate(-50%, -50%); /* 使文字水平垂直居中 */
  opacity: 0; /* 默认隐藏文字 */
  animation: fadeIn 2s ease forwards; /* 文字慢慢出现动画 */
}

@keyframes moveAndFade {
  0% {
    opacity: 0;
    top: 20px; /* 第二张图片初始位置：第一张图片的右上角 */
    left: 60%; /* 第二张图片初始位置：第一张图片的右上角 */
  }
  50% {
    opacity: 1;
    top: 50%; /* 第二张图片中途位置：垂直居中 */
    left: 48%;
    /* 第二张图片中途位置：水平居中 */
  }
  100% {
    opacity: 0;
    top: 60%; /* 第二张图片结束位置：底部 */
    left: 45%; /* 第二张图片结束位置：左侧 */
  }
}

.line1,
.line2,
.line3,
.custom-button {
  opacity: 0; /* 默认隐藏文字 */
  animation: fadeIn 1s ease forwards; /* 文字慢慢出现动画 */
}

.line1 {
  animation-delay: 0.25s; /* 第一行文字延迟0.5秒出现 */
}

.line2 {
  animation-delay: 0.5s; /* 第二行文字延迟1秒出现 */
}

.line3 {
  animation-delay: 1s; /* 第三行文字延迟1.5秒出现 */
}

.custom-button {
  animation-delay: 1s;
}

.custom-button {
  margin-top: 10px; /* 按钮与文字之间的间距 */
  padding: 10px 30px; /* 按钮的内边距 */
  font-size: 12px; /* 按钮的字体大小 */
  background-color: #1890ff; /* 按钮的背景颜色 */
  color: white; /* 按钮文字的颜色 */
  border: none; /* 移除按钮边框 */
  border-radius: 20px; /* 设置按钮的圆角 */
  cursor: pointer; /* 鼠标悬停样式 */
  transition: background-color 0.3s; /* 按钮背景颜色变化过渡效果 */
}

.custom-button:hover {
  background-color: #40a9ff; /* 鼠标悬停时的背景颜色 */
}

@keyframes fadeIn {
  from {
    opacity: 0; /* 初始时隐藏 */
  }
  to {
    opacity: 1; /* 最终显示 */
  }
}

.line1 {
  font-weight: 700;
  font-size: 32px; /* 第一行文字的字体大小 */

  margin-bottom: 10px;
  color: #1890ff; /* 第一行文字的颜色 */
}

.line2 {
  font-weight: 700;
  font-size: 20px; /* 第二行文字的字体大小 */
  margin-bottom: 10px;
  color: #222222; /* 第二行文字的颜色 */
}

.line3 {
  font-size: 13px; /* 第三行文字的字体大小 */
  color: rgba(0, 0, 0, 0.65); /* 第三行文字的颜色 */
}
</style>
